<template>
  <div id="body">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="53px" style="position: absolute">
      <x-header class="my-header" >服务详情</x-header>
      <group>
        <form-preview :header-label="$t('付款金额(元)')" :header-value="orderData.price" :body-items="list"></form-preview>
      </group>
      <group title="选择支付方式" v-if="!isWeixin">
        <radio  :options="paymethods" v-model="payradio"></radio>
      </group>
      <group>
        <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="orderPay">支付</x-button>
      </group>
      <divider>本平台不提供生理盐水</divider>
    </view-box>
    <div v-html="form"></div>
  </div>
</template>

<script>

  //微信支付链接直接写的域名
  import wx from 'weixin-js-sdk'
  import { Radio,Flexbox, FlexboxItem,Group,ViewBox,XHeader,FormPreview,XButton,Divider } from 'vux'
  export default {
    data(){
      return{
        orderData:'',
        list: [],
        isWeixin:false,      //是否在微信中，默认为false
        paymethods: [{
          icon:'/static/img/wechat1@2x.png',
          key: 2,
          value: '微信支付'
        }, {
          icon:'/static/img/alipay.png',
          key: 1,
          value: '支付宝支付'
        }],
        payradio:2,
        form:''
      }
    },
    mounted(){
      this.orderData=this.$route.query
      this.initData()
      this.checkPayStatus(this.orderData.oid)
      this.is_weixin()

    },
    methods:{
      //判断是否在微信内部
      is_weixin() {
        let  ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          this.isWeixin=true
        } else {
          this.isWeixin=false
        }
      },
      //检查订单是否超时
      checkPayStatus(oid){
        this.Ajax('get','/Order/order/payTimeout/oid/'+oid,{},(res)=>{
          console.log(res)
        })
      },
      initData(){
        this.orderData=this.$route.query
        let data={
          label:'服务对象:',
          value:this.orderData.patient_name
        }
        this.list.push(data)
        let loc= {
          label: '地址:',
          value: this.orderData.loc
        }
        this.list.push(loc)
//        let start={
//          label:'下单时间:',
//          value:new Date(parseInt( this.orderData.datetime)).toLocaleString()
//        }
//        this.list.push(start)
      },
      //      formatDate(time) {                           //获取时间格式
      //        return time.getFullYear() + "年" + (time.getMonth() + 1) + "月" + time.getDate() + "日 " + time.getHours() + "点" + time.getMinutes() + "分" + time.getSeconds() + "秒";
      //      },
      orderPay(){
        if(this.payradio==1){
          let data={
            client_type:'wap',
            type:1,
            method:this.payradio
          }
          this.Ajax('post','/Order/Order/getPayString/oid/'+this.orderData.oid,data,(res)=>{
            let sign=res.data.payString
            const div = document.createElement('div');
            div.innerHTML = sign;
            document.body.appendChild(div);
            document.forms.alipaysubmit.submit();
          })
        }else if(this.payradio==2){
          if(this.isWeixin){
            let data={
              client_type:'wx',
              type:1,
              method:this.payradio
            }
            this.Ajax('post','/Order/Order/getPayString/oid/'+this.orderData.oid,data,(res)=>{
                console.log(res)
              let _this = this
              res.timeStamp = res.timeStamp.toString()
              function onBridgeReady() {
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
                    "appId": res.appId,     //公众号名称，由商户传入
                    "timeStamp": res.timeStamp,         //时间戳，自1970年以来的秒数
                    "nonceStr": res.nonceStr, //随机串
                    "package": res.package,
                    "signType": "MD5",         //微信签名方式：
                    "paySign": res.paySign //微信签名
                  },
                  function (res) {
//                      _this.$router.push({
//                        path:'/success',
//                        query:res
//                      })
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                      _this.$router.push({
                        path: '/order_details/success',
                      })
                    }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                  }
                );}
              if (typeof WeixinJSBridge == "undefined"){
                  console.log('2333')
                if( document.addEventListener ){
                  document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }else if (document.attachEvent){
                  document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                  document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
              }else{
                onBridgeReady();
              }
            })
          }
          else{
            let data={
              client_type:'wap',
              type:1,
              method:this.payradio
            }
            this.Ajax('post','/Order/Order/getPayString/oid/'+this.orderData.oid,data,(res)=>{
              console.log(res)

//              let host = window.location.host;
//              let encodeurl="http://"+host+"/order_details/success"
//              encodeurl=encodeURIComponent(encodeurl);
              let url = res.mweb_url
              console.log(url)
              this.$router.push({
                path:'/order_details/check_weixinpay',
                query:{
                  oid:this.orderData.oid
                }
              })
              window.location.href=url
            })

          }
        }
      }
    },
    components:{
      Flexbox,
      FlexboxItem,
      Group,
      ViewBox,
      XHeader,
      XButton,
      FormPreview,
      Divider,
      Radio
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .flex-demo{
    height: 90px;
    background-color: white;
  }
  .my-header {
    background-color: rgb(255, 104, 140);
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
</style>
